import React from 'react'
import {Card,Button,Tabs,message,Icon} from 'antd'
import './index.less'
const TabPane = Tabs.TabPane;
export default class Tabes extends React.Component{
    handleCallback =(key)=>{
        message.info('Hi,你是'+key)
    }
    componentWillMount(){
       const panes =[
           {
               title:'tab1',
               content:'tabqa1',
               key:'1'
           },
           {
               title:'tab2',
               content:'tabqa2',
               key:'2'
           }
       ]
    }
    render(){
        return(
            <div style={{backgroundColor:"white"}}>
               <Card title="Tab标签页一" className="card-wrap">
                   <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                       <TabPane tab="Tab 1" key="1">你是key1</TabPane>
                       <TabPane tab="Tab 2" key="2" disabled >你是key2</TabPane>
                       <TabPane tab="Tab 3" key="3">你是key3</TabPane>
                   </Tabs>
               </Card>
                <Card title="Tab标签页二" className="card-wrap">
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab={<span><Icon type="apple" />苹果</span>} key="1">
                           苹果
                        </TabPane>
                        <TabPane tab={<span><Icon type="android" />安卓</span>} key="2">
                          安卓
                        </TabPane>
                    </Tabs>
                </Card>
                <Card title="Tab标签页三" className="card-wrap">
                    <Tabs defaultActiveKey="1">
                    </Tabs>
                </Card>
            </div>
        )
    }
}